<template>
    <div class="container">
        <div class="row col-md-8 col-md-offset-3">


            <div class="form-horizontal">


                <div class="form-group">
                    <label  class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-5">
                        <input type="text"
                               name="email"
                               class="form-control" required v-model="email" placeholder="请输入邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">密&nbsp&nbsp&nbsp&nbsp&nbsp码</label>
                    <div class="col-sm-5">
                        <input type="password"
                               name="password"
                               class="form-control" v-model="password" placeholder="请输入密码">
                    </div>
                </div>
                <input type='file'  accept='image/*' name='file'  id='file'/>
                <img id="touPicture"
            style="width: 100px;height: 100px;overflow:hidden;"class="user-image" alt="User Image">
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-6" style="margin-top: 40px;">
                        <button type="button" class="btn btn-default btn-success" style="float: left;margin-left: -15px;" @click="wl_login()" >登录</button>
                        <a type="button" class="btn btn-default btn-success" 
                        style="float: right;color:white;" href="/#/register">注册一个</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import conf from '../layout/conf.vue'//引用模块进来
    export default {
        mounted() {
        this.ymh();
        },
        data(){
            return {
                list: {},
                email:"",
                password:"",
                url:conf.url+"post/web/index.php?r=user/login/index",

            }


        },

        methods:{
            wl_login(){


                var params = new URLSearchParams();
                params.append('user_email',this.email);
                params.append('user_pwd', this.password);

                this.axios.post(this.url,params).then(response=>{
                    
                     var info=response['data']['data'];
                     console.log(info)
                    let  error=response.data['error'];
                    if(error==0){
                        //登陆成功!
                        console.log(response);
                        message("ok","登陆成功!");
                        this.SetCookie("wlphp.cn", "", -1);
                        this.SetCookie("name", "", -1);
                        this.SetCookie("tou", "", -1);
            
                        this.SetCookie("wlphp.cn",info['access_token'],'1');
                        this.SetCookie("name",info['username'],'1');
                        this.SetCookie("tou",info['tou'],'1');
                         setTimeout(function () {
                                location.href="/";
                            },1000)
                        

                    }else{
                        //登陆失败!
                         this.message("no","登陆失败!");
                    }

                });
            },

            wl_test(){

            this.message("no","登陆失败!");
            },



                 getCookie: function (cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1);
                    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
                }
                return "";
            },

             

                

        }


    }

// http://demo.shou.com/index.php/index/index/file
   

    $(function(){
        $("#file").change(function(){
                            
                             var file = $('#file').get(0).files[0];
                             //创建用来读取此文件的对象
                             var reader = new FileReader();
                             //使用该对象读取file文件
                             reader.readAsDataURL(file);
                             //读取文件成功后执行的方法函数
                             reader.onload=function(e){
                                 //读取成功后返回的一个参数e，整个的一个进度事件
//                                  console.log(e);
                                 //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                                 //的base64编码格式的地址
                                 $('#touPicture').get(0).src = e.target.result;
                             }
                             
                             //选择了之后开始图品的ajax
                                            var imgpath;
                            　　//formdata储存异步上传数据
                            //此处必要注意的点,append的键不能是一样的不然直接GG,傻逼一样的报错
                             var formData = new FormData($('form')[0]);
                             formData.append('file',$('#file')[0].files[0]);
                            $("#ok").hide();
                            $("#waitBtn").show();
                             $.ajax({
                                
                                url:'http://shou.wlphp.cn/index/index/file',
                                  type: 'POST',
                                  
                                  data: formData,
                                 
                                  //这两个设置项必填
                                  contentType: false,
                                  processData: false,
                                  success:function(data){
                                   
                                   console.log(data.data);
//                                    var srcPath = data;
//                                    // console.log(data.path);
//                                    // console.log(data.name);
                                  // var obj =JSON.parse(data);
                                  //  var img=obj[0]["path"];
                                  //  imgpath=img;
                                  //   this.img=imgpath;
                                  //   console.log(this.img);
                                    $("#img").html(imgpath);
                                  },error:function (XMLHttpRequest, textStatus, errorThrown) 
                                  { 
                                    console.log(XMLHttpRequest);
                                    console.log(textStatus);
                                    console.log(errorThrown);
                                  }
            
                                
                             })

    })
    })
</script>

